<template>
  <div class="dashboard">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <div class="logo">
            <img src="https://www.bilibili.com/favicon.ico" alt="bilibili" />
            <span>B站下载器</span>
          </div>
          
          <div class="search-section">
            <div class="search-wrapper">
              <el-input
                v-model="searchQuery"
                placeholder="请输入要下载的视频链接或BV号"
                size="large"
                class="search-input"
              >
                <template #append>
                  <el-button 
                    type="primary" 
                    @click="handleSearch"
                    :loading="searching"
                  >
                    <el-icon><Search /></el-icon>
                    搜索
                  </el-button>
                </template>
              </el-input>
            </div>
          </div>
          
          <div class="user-section">
            <div class="user-info" v-if="userInfo">
              <img 
                :src="userInfo.face" 
                alt="头像" 
                class="avatar"
                @error="handleAvatarError"
              />
              <span class="username">{{ userInfo.uname }}</span>
              <el-dropdown @command="handleUserAction">
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="user-skeleton" v-else>
              <el-skeleton :rows="1" animated />
            </div>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="container">
        <div class="content-wrapper">
          <!-- 标签页 -->
          <el-tabs v-model="activeTab" class="main-tabs">
            <el-tab-pane label="视频搜索" name="search">
              <!-- 欢迎区域 -->
              <div class="welcome-section" v-if="userInfo && !videoInfo">
                <h1>欢迎回来，{{ userInfo.uname }}！</h1>
                <p>您可以在上方搜索框中输入B站视频链接或BV号来下载视频</p>
              </div>
              
              <!-- 视频信息展示区域 -->
              <div class="video-section" v-if="videoInfo">
                <div class="video-header">
                  <h2>视频信息</h2>
                  <el-button 
                    type="primary" 
                    size="large"
                    @click="downloadAllVideos"
                    :loading="downloadingAll"
                    :disabled="!videoInfo.data.pages || videoInfo.data.pages.length === 0"
                  >
                    <el-icon><Download /></el-icon>
                    全部下载
                  </el-button>
                </div>
                
                <div class="video-info-card">
                  <div class="video-basic-info">
                    <div class="video-cover">
                      <img :src="getProxyImageUrl(videoInfo.data.pic)" :alt="videoInfo.data.title" />
                    </div>
                    <div class="video-details">
                      <h3 class="video-title">{{ videoInfo.data.title }}</h3>
                      <div class="video-meta">
                        <span class="meta-item">BV号: {{ videoInfo.data.bvid }}</span>
                        <span class="meta-item">总时长: {{ formatDuration(videoInfo.data.duration) }}</span>
                        <span class="meta-item">分P数量: {{ videoInfo.data.videos }}个</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 分P列表 -->
                <div class="video-parts" v-if="videoInfo.data.pages && videoInfo.data.pages.length > 0">
                  <div class="parts-header">
                    <h3>分P列表</h3>
                    <div class="parts-actions">
                      <el-checkbox 
                        v-model="selectAll" 
                        @change="handleSelectAll"
                        :indeterminate="isIndeterminate"
                      >
                        全选
                      </el-checkbox>
                      <el-button 
                        type="primary" 
                        size="small"
                        @click="downloadSelectedVideos"
                        :loading="downloadingSelected"
                        :disabled="selectedParts.length === 0"
                      >
                        <el-icon><Download /></el-icon>
                        批量下载 ({{ selectedParts.length }})
                      </el-button>
                    </div>
                  </div>
                  <div class="parts-grid">
                    <div 
                      v-for="page in videoInfo.data.pages" 
                      :key="page.cid"
                      class="part-card"
                      :class="{ 'selected': selectedParts.includes(page.cid) }"
                    >
                      <div class="part-cover">
                        <img 
                          :src="getProxyImageUrl(page.first_frame)" 
                          :alt="page.part"
                          class="part-cover-img"
                          @error="handlePartCoverError"
                        />
                        <div class="part-overlay">
                          <span class="part-number">P{{ page.page }}</span>
                          <span class="part-duration">{{ formatDuration(page.duration) }}</span>
                        </div>
                        <div class="part-checkbox">
                          <el-checkbox 
                            :model-value="selectedParts.includes(page.cid)"
                            @change="togglePartSelection(page.cid)"
                            size="large"
                          />
                        </div>
                      </div>
                      <div class="part-info">
                        <h4 class="part-title">{{ page.part }}</h4>
                        <div class="part-actions">
                          <el-button 
                            type="primary" 
                            size="small"
                            @click="downloadSingleVideo(page)"
                            :loading="downloadingVideos.has(page.cid.toString())"
                          >
                            <el-icon><Download /></el-icon>
                            下载
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="video-actions">
                  <el-button type="primary" @click="startDownload(videoInfo.data)">
                    下载视频
                  </el-button>
                </div>
              </div>
              
              <!-- 功能卡片（当没有搜索结果时显示） -->
              <div class="feature-cards" v-if="!videoInfo">
                <div class="card feature-card">
                  <div class="card-icon">
                    <el-icon><VideoPlay /></el-icon>
                  </div>
                  <h3>视频下载</h3>
                  <p>支持下载B站视频，多种清晰度可选</p>
                </div>
                
                <div class="card feature-card">
                  <div class="card-icon">
                    <el-icon><Microphone /></el-icon>
                  </div>
                  <h3>音频提取</h3>
                  <p>从视频中提取高质量音频文件</p>
                </div>
                
                <div class="card feature-card">
                  <div class="card-icon">
                    <el-icon><Download /></el-icon>
                  </div>
                  <h3>批量下载</h3>
                  <p>支持批量下载多个视频文件</p>
                </div>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="下载管理" name="downloads">
              <DownloadManager ref="downloadManagerRef" @switch-tab="handleSwitchTab" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, onMounted, computed, watch, nextTick, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Search, ArrowDown, VideoPlay, Microphone, Download } from '@element-plus/icons-vue'
import { apiMethods } from '../utils/api'
import { clearSessData } from '../utils/auth'
import DownloadManager from '../components/DownloadManager.vue'
import axios from 'axios'

export default {
  name: 'Dashboard',
  components: {
    Search,
    ArrowDown,
    VideoPlay,
    Microphone,
    Download,
    DownloadManager
  },
  setup() {
    const router = useRouter()
    const searchQuery = ref('')
    const searching = ref(false)
    const userInfo = ref(null)
    const videoInfo = ref(null)
    const downloadingAll = ref(false)
    const downloadingVideos = ref(new Set())
    const selectedParts = ref([])
    const downloadingSelected = ref(false)
    const selectAll = ref(false)
    const activeTab = ref('search')
    const downloadManagerRef = ref(null)
    
    // 获取用户信息
    const fetchUserInfo = async () => {
      try {
        const response = await apiMethods.getLoginInfo()
        if (response.data.code === 0 && response.data.data.isLogin) {
          userInfo.value = response.data.data
        } else {
          // 未登录，跳转到登录页
          ElMessage.warning('登录状态已过期，请重新登录')
          router.push('/login')
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败')
        router.push('/login')
      }
    }
    
    // 处理搜索
    const handleSearch = async () => {
      if (!searchQuery.value.trim()) {
        ElMessage.warning('请输入视频链接或BV号')
        return
      }
      
      searching.value = true
      try {
        console.log('搜索视频:', searchQuery.value)
        const response = await apiMethods.getVideoInfo(searchQuery.value)
        console.log('视频信息响应:', response.data)
        
        if (response.data.code === 0) {
          videoInfo.value = response.data
          // 重置选择状态
          selectedParts.value = []
          selectAll.value = false
          ElMessage.success('视频信息获取成功')
        } else {
          ElMessage.error(response.data.message || '获取视频信息失败')
          videoInfo.value = null
          selectedParts.value = []
          selectAll.value = false
        }
      } catch (error) {
        console.error('搜索视频失败:', error)
        ElMessage.error('搜索视频失败，请检查网络连接')
        videoInfo.value = null
      } finally {
        searching.value = false
      }
    }
    
    // 格式化时长
    const formatDuration = (duration) => {
      if (!duration) return '0:00'
      
      const totalSeconds = parseInt(duration)
      const hours = Math.floor(totalSeconds / 3600)
      const minutes = Math.floor((totalSeconds % 3600) / 60)
      const seconds = totalSeconds % 60
      
      if (hours > 0) {
        return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
      } else {
        return `${minutes}:${seconds.toString().padStart(2, '0')}`
      }
    }
    
    // 获取代理图片URL
    const getProxyImageUrl = (imageUrl) => {
      if (!imageUrl) return ''
      return apiMethods.getProxyImage(imageUrl)
    }
    
    // 下载单个视频
    const downloadSingleVideo = async (page) => {
      if (!videoInfo.value || !videoInfo.value.data) {
        ElMessage.error('视频信息不存在')
        return
      }
      
      const cid = page.cid.toString()
      downloadingVideos.value.add(cid)
      
      try {
        console.log('下载单个视频:', page)
        console.log('当前视频信息:', videoInfo.value)
        
        // 构建下载请求数据，使用当前视频的bvid和选中分P的cid
        const videoList = [{
          bvid: videoInfo.value.data.bvid,
          cid: cid,
          qn: 80,
          fnval: 16
        }]
        
        console.log('发送单个视频下载请求:', JSON.stringify({ videoList }, null, 2))
        
        // 使用批量下载的接口
        const response = await apiMethods.getVideoDownloadUrls({ videoList })
        console.log('单个视频下载请求响应:', response)
        
        // 等待一小段时间，确保后端已经创建了进度信息
        await new Promise(resolve => setTimeout(resolve, 500))
        
        ElMessage.success('下载任务已开始，请在下载管理中查看进度')
        
      } catch (error) {
        console.error('下载失败:', error)
        ElMessage.error('下载失败: ' + error.message)
        downloadingVideos.value.delete(cid)
      }
    };
    
    // 批量下载选中的视频
    const downloadSelectedVideos = async () => {
      if (selectedParts.value.length === 0) {
        ElMessage.warning('请选择要下载的视频')
        return
      }
      
      downloadingSelected.value = true
      try {
        console.log('批量下载选中视频:', selectedParts.value)
        console.log('当前视频信息:', videoInfo.value)
        
        // 根据选中的cid筛选对应的分P
        const selectedPages = videoInfo.value.data.pages.filter(page => 
          selectedParts.value.includes(page.cid)
        )
        
        console.log('选中的分P:', selectedPages)
        
        // 构建下载请求数据
        const videoList = selectedPages.map(page => {
          const cid = parseInt(page.cid);
          if (isNaN(cid) || cid <= 0) {
            throw new Error(`无效的 cid: ${page.cid}`);
          }
          
          const videoData = {
            bvid: videoInfo.value.data.bvid,
            cid: cid.toString(), // 转换为字符串
            qn: 80,
            fnval: 16
          }
          console.log('构建视频信息:', videoData)
          return videoData
        })
        
        console.log('发送下载请求:', JSON.stringify({ videoList }, null, 2))
        
        // 发送下载请求
        const response = await apiMethods.getVideoDownloadUrls({ videoList })
        console.log('下载请求响应:', response)
        
        // 等待一小段时间，确保后端已经创建了进度信息
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 切换到下载管理标签页
        activeTab.value = 'downloads'
        ElMessage.success('下载任务已开始，请在下载管理中查看进度')
        
      } catch (error) {
        console.error('批量下载失败:', error)
        ElMessage.error('批量下载失败: ' + error.message)
      } finally {
        downloadingSelected.value = false
      }
    }
    
    // 下载全部视频
    const downloadAllVideos = async () => {
      if (!videoInfo.value || !videoInfo.value.data.pages) {
        ElMessage.warning('没有可下载的视频')
        return
      }
      
      downloadingAll.value = true
      try {
        console.log('下载全部视频:', videoInfo.value.data.pages)
        console.log('当前视频信息:', videoInfo.value)
        
        // 构建所有分P的下载请求数据
        const videoList = videoInfo.value.data.pages.map(page => {
          // 确保 cid 是有效的数字
          const cid = parseInt(page.cid);
          if (isNaN(cid) || cid <= 0) {
            throw new Error(`无效的 cid: ${page.cid}`);
          }
          
          const videoData = {
            bvid: videoInfo.value.data.bvid,
            cid: cid.toString(), // 转换为字符串
            qn: 80,
            fnval: 16
          }
          console.log('构建视频信息:', videoData)
          return videoData
        })
        
        console.log('发送下载请求:', JSON.stringify({ videoList }, null, 2))
        
        // 发送下载请求
        const response = await apiMethods.getVideoDownloadUrls({ videoList })
        console.log('下载请求响应:', response)
        
        // 等待一小段时间，确保后端已经创建了进度信息
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 切换到下载管理标签页
        activeTab.value = 'downloads'
        ElMessage.success('下载任务已开始，请在下载管理中查看进度')
        
      } catch (error) {
        console.error('批量下载失败:', error)
        ElMessage.error('批量下载失败: ' + error.message)
      } finally {
        downloadingAll.value = false
      }
    }
    
    // 切换分P选择状态
    const togglePartSelection = (cid) => {
      const index = selectedParts.value.indexOf(cid)
      if (index > -1) {
        selectedParts.value.splice(index, 1)
      } else {
        selectedParts.value.push(cid)
      }
      updateSelectAllState()
    }
    
    // 处理全选/取消全选
    const handleSelectAll = (checked) => {
      if (checked) {
        selectedParts.value = videoInfo.value.data.pages.map(page => page.cid)
      } else {
        selectedParts.value = []
      }
    }
    
    // 更新全选状态
    const updateSelectAllState = () => {
      if (!videoInfo.value || !videoInfo.value.data.pages) return
      
      const totalPages = videoInfo.value.data.pages.length
      const selectedCount = selectedParts.value.length
      
      if (selectedCount === 0) {
        selectAll.value = false
      } else if (selectedCount === totalPages) {
        selectAll.value = true
      } else {
        selectAll.value = false
      }
    }
    
    // 计算是否为半选状态
    const isIndeterminate = computed(() => {
      if (!videoInfo.value || !videoInfo.value.data.pages) return false
      
      const totalPages = videoInfo.value.data.pages.length
      const selectedCount = selectedParts.value.length
      
      return selectedCount > 0 && selectedCount < totalPages
    })
    
    // 处理用户操作
    const handleUserAction = (command) => {
      if (command === 'logout') {
        clearSessData()
        ElMessage.success('已退出登录')
        router.push('/login')
      }
    }
    
    // 处理头像加载错误
    const handleAvatarError = (event) => {
      event.target.src = 'https://static.hdslb.com/images/member/noface.gif'
    }
    
    // 处理分P封面加载错误
    const handlePartCoverError = (event) => {
      // 如果分P封面加载失败，使用视频封面作为替代
      if (videoInfo.value && videoInfo.value.data.pic) {
        event.target.src = getProxyImageUrl(videoInfo.value.data.pic)
      } else {
        // 如果都没有，使用默认图片
        event.target.src = ''
      }
    }
    
    const startDownload = async (videoUrl) => {
      try {
        const response = await axios.post('/api/video/download', { videoUrl });
        const downloadId = response.data;
        console.log('开始下载:', downloadId);
        
        ElMessage.success('下载任务已开始，请在下载管理中查看进度');
      } catch (error) {
        console.error('下载失败:', error);
        ElMessage.error('下载失败: ' + (error.response?.data || error.message));
      }
    };
    
    // 处理标签页切换
    const handleSwitchTab = (tabName) => {
      activeTab.value = tabName
    }
    
    // 监听标签切换
    watch(activeTab, (newTab, oldTab) => {
      console.log(`标签切换: ${oldTab} -> ${newTab}`)
      if (newTab === 'downloads' && downloadManagerRef.value) {
        console.log('切换到下载管理，刷新下载列表')
        // 延迟执行，确保组件已经渲染
        nextTick(() => {
          downloadManagerRef.value.fetchDownloadList(true)
        })
      }
    })

    onMounted(() => {
      fetchUserInfo()
    })
    
    return {
      searchQuery,
      searching,
      userInfo,
      videoInfo,
      downloadingAll,
      downloadingVideos,
      selectedParts,
      downloadingSelected,
      selectAll,
      isIndeterminate,
      handleSearch,
      handleUserAction,
      handleAvatarError,
      handlePartCoverError,
      formatDuration,
      getProxyImageUrl,
      downloadSingleVideo,
      downloadAllVideos,
      downloadSelectedVideos,
      startDownload,
      activeTab,
      handleSwitchTab,
      downloadManagerRef,
      togglePartSelection,
      handleSelectAll
    }
  }
}
</script>

<style scoped>
:root {
  --bilibili-blue: #00a1d6;
  --bilibili-pink: #fb7299;
}

.dashboard {
  min-height: 100vh;
  background: #f4f5f7;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e5e7;
}

.header {
  background: white;
  border-bottom: 1px solid #e3e5e7;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  height: 64px;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #18191c;
  flex-shrink: 0;
}

.logo img {
  width: 28px;
  height: 28px;
}

.search-section {
  flex: 1;
  max-width: 600px;
  margin: 0 20px;
}

.search-wrapper {
  width: 100%;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 20px 0 0 20px;
}

.search-input :deep(.el-input-group__append) {
  border-radius: 0 20px 20px 0;
  background: var(--bilibili-blue);
  border-color: var(--bilibili-blue);
}

.search-input :deep(.el-input-group__append .el-button) {
  background: transparent;
  border: none;
  color: white;
  padding: 0 20px;
}

.user-section {
  flex-shrink: 0;
  min-width: 150px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 20px;
  transition: background 0.3s;
}

.user-info:hover {
  background: #f8f9fa;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  color: #18191c;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-icon {
  color: #61666d;
  font-size: 12px;
}

.user-skeleton {
  padding: 8px 12px;
}

.main-content {
  padding: 40px 0;
}

.content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

.welcome-section {
  text-align: center;
  margin-bottom: 50px;
}

.welcome-section h1 {
  font-size: 32px;
  color: #18191c;
  margin-bottom: 12px;
  font-weight: 600;
}

.welcome-section p {
  color: #61666d;
  font-size: 16px;
}

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.feature-card {
  padding: 30px;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid #e3e5e7;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.card-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--bilibili-blue), var(--bilibili-pink));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.card-icon .el-icon {
  font-size: 24px;
  color: white;
}

.feature-card h3 {
  font-size: 20px;
  color: #18191c;
  margin-bottom: 12px;
  font-weight: 600;
}

.feature-card p {
  color: #61666d;
  line-height: 1.6;
  font-size: 14px;
}

/* 视频信息展示样式 */
.video-section {
  margin-top: 20px;
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e3e5e7;
}

.video-header h2 {
  font-size: 24px;
  color: #18191c;
  margin: 0;
  font-weight: 600;
}

.video-info-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e3e5e7;
}

.video-basic-info {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.video-cover {
  flex-shrink: 0;
}

.video-cover img {
  width: 200px;
  height: 125px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e3e5e7;
}

.video-details {
  flex: 1;
  min-width: 0;
}

.video-title {
  font-size: 20px;
  color: #18191c;
  margin: 0 0 16px 0;
  font-weight: 600;
  line-height: 1.4;
}

.video-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.meta-item {
  color: #61666d;
  font-size: 14px;
  padding: 4px 8px;
  background: #f8f9fa;
  border-radius: 4px;
}

.video-parts {
  margin-top: 24px;
}

.parts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.parts-header h3 {
  font-size: 18px;
  color: #18191c;
  margin: 0;
  font-weight: 600;
}

.parts-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.part-card {
  background: white;
  border: 1px solid #e3e5e7;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s;
}

.part-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--bilibili-blue);
}

.part-card.selected {
  border-color: var(--bilibili-blue);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.part-cover {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

.part-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.part-card:hover .part-cover-img {
  transform: scale(1.05);
}

.part-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom, 
    rgba(0, 0, 0, 0.3) 0%, 
    transparent 30%, 
    transparent 70%, 
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px;
}

.part-number {
  background: var(--bilibili-blue);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.part-duration {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.part-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
}

.part-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: var(--bilibili-blue);
  border-color: var(--bilibili-blue);
}

.part-checkbox :deep(.el-checkbox__inner) {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

.part-info {
  padding: 12px 16px 16px;
}

.part-title {
  font-size: 14px;
  color: #18191c;
  margin: 0 0 12px 0;
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}

.part-actions {
  text-align: right;
}

.video-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

/* 标签页样式 */
.main-tabs {
  margin-top: 20px;
}

.main-tabs :deep(.el-tabs__header) {
  margin-bottom: 20px;
}

.main-tabs :deep(.el-tabs__nav-wrap) {
  background: white;
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.main-tabs :deep(.el-tabs__item) {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s;
}

.main-tabs :deep(.el-tabs__item.is-active) {
  background: var(--bilibili-blue);
  color: white;
}

.main-tabs :deep(.el-tabs__item:hover) {
  background: rgba(0, 123, 255, 0.1);
}

.main-tabs :deep(.el-tabs__active-bar) {
  display: none;
}

@media (max-width: 768px) {
  .header-content {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 0;
  }
  
  .search-section {
    order: 3;
    width: 100%;
    margin: 12px 0 0 0;
  }
  
  .feature-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .welcome-section h1 {
    font-size: 24px;
  }
  
  .video-basic-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .video-cover img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }
  
  .video-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .parts-grid {
    grid-template-columns: 1fr;
  }
  
  .parts-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .parts-actions {
    justify-content: space-between;
  }
  
  .main-tabs :deep(.el-tabs__item) {
    padding: 8px 16px;
    font-size: 14px;
  }
}
</style> 